<template>
	<view>
		<!-- #ifndef MP-WEIXIN-->
		<my-navbar leftText="使用记录" @leftClick="back"></my-navbar>
		<!-- #endif -->
		<div class="tabs_box">
			<view class="box">
				<u-subsection class="tabs" :list="list" :current="current" @change="changeTab"></u-subsection>
			</view>
		</div>
		<view class="content" v-show="current==0">
			<view class="copon_box copon_used flex-btw" v-for="item in dataList1" :key="item.id">
				<view class="left flex-center">{{item.type==1?'普通券':'现金券'}}</view>
				<view class="center flex-btw">
					<view class="center_left">
						<view class="price">￥{{item.coupons.money}}</view>
						<view class="info" @click="alertInfo(item.coupons.describe)">
							<u-icon name="question-circle"></u-icon>
							<text class="info_text">使用说明</text>
						</view>
					</view>
					<view class="center_right">
						<view v-if="item.coupons.type==1" class="rule">满{{item.coupons.order_money_limit}}使用</view>
						<view v-else-if="item.coupons.type==2" class="rule">无门槛</view>
						<view class="limit" v-if="item.coupons.get_limit">每位用户限制{{item.coupons.get_num}}张</view>
						<view class="limit" v-else>不限量</view>
						<view class="time" v-if="item.coupons.expire_type==1">
							{{parseTime(item.coupons.start_time)}}~{{parseTime(item.coupons.end_time)}}
						</view>
						<view class="time" v-else-if="item.coupons.expire_type==2">限{{item.coupons.expire_days}}天内使用
						</view>
					</view>
				</view>
				<view class="right">已使用</view>
			</view>

			<view v-if="nodata" class="nodata-box">
				<image class="nodata-pic" src="../../../static/image/nodata.png"></image>
				<view class="nodata-txt">暂无数据</view>
			</view>
		</view>
		<view class="content" v-show="current==1">
			<view class="copon_box copon_used flex-btw" v-for="item in dataList2" :key="item.id">
				<view class="left flex-center">{{item.type==1?'普通券':'现金券'}}</view>
				<view class="center flex-btw">
					<view class="center_left">
						<view class="price">￥{{item.coupons.money}}</view>
						<view class="info" @click="alertInfo(item.coupons.describe)">
							<u-icon name="question-circle"></u-icon>
							<text class="info_text">使用说明</text>
						</view>
					</view>
					<view class="center_right">
						<view class="rule">满{{item.coupons.order_money_limit}}使用</view>
						<view class="limit" v-if="item.coupons.get_limit">每位用户限制{{item.coupons.get_num}}张</view>
						<view class="limit" v-else>不限量</view>
						<view class="time" v-if="item.coupons.expire_type==1">
							{{parseTime(item.coupons.start_time)}}~{{parseTime(item.coupons.end_time)}}
						</view>
						<view class="time" v-else-if="item.coupons.expire_type==2">限{{item.coupons.expire_days}}天内使用
						</view>
					</view>
				</view>
				<view class="right">已过期</view>
			</view>

			<view v-if="nodata1" class="nodata-box">
				<image class="nodata-pic" src="../../../static/image/nodata.png"></image>
				<view class="nodata-txt">暂无数据</view>
			</view>

		</view>
		<u-modal v-model="info.show" :content="info.value" title="使用说明" confirm-color="#40AE36"></u-modal>
	</view>
</template>

<script>
	import {
		$https
	} from '@/static/js/request.js';
	export default {
		data() {
			return {
				list: [{
					name: '已使用'
				}, {
					name: '已过期'
				}, ],
				current: 0,

				dataList1: [],
				dataList2: [],
				pages1: {
					page: 1,
					count: null,
				},
				pages2: {
					page: 1,
					count: null,
				},
				info: {
					value: '',
					show: false,
				},
				nodata: false,
				nodata1: false
			};
		},
		onLoad() {
			this.getData(1, 1);
			this.getData(1, 2);
		},
		methods: {
			getData(page, status) {
				// 1 已使用 2 已过期
				var params = {
					size: 7,
					page,
					status,
				}
				$https('GET', 'getMyCouponsList', params, res => {
					if (res.data.errcode == 0) {
						var list = res.data.data.list;
						if (status == 1) {
							console.log(res)
							if (list.length == 0) {
								this.nodata = true
							} else {
								this.dataList1 = this.dataList1.concat(list)
								this.pages1.count = res.data.data.count;
								this.pages1.page = page;
								this.nodata = false
							}
						} else if (status == 2) {
							if (list.length == 0) {
								this.nodata1 = true
							} else {
								this.dataList2 = this.dataList2.concat(list)
								this.pages2.count = res.data.data.count;
								this.pages2.page = page;
							}

						}
					} else {
						uni.showToast({
							title: res.data.errmsg,
							icon: 'none'
						});
					}
				})
			},
			changeTab(index) {
				this.current = index;
			},
			alertInfo(info) {
				this.info.value = info;
				this.info.show = true;
			},
			parseTime(time) {
				time = time * 1000;
				var date = new Date(time);
				var year = date.getFullYear(),
					month = date.getMonth() + 1 < 9 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1,
					day = date.getDate() < 9 ? '0' + date.getDate() : date.getDate();
				return `${year}-${month}-${day}`
			},
			back() {
				// #ifdef H5
				window.history.back(-1);
				// #endif 
				// #ifndef H5
				uni.navigateBack();
				// #endif
			},
		},
		onReachBottom() {
			if (this.current == 0) {
				if (this.dataList1.length < this.pages1.count) {
					this.pages1.page++;
					this.getData(this.pages1.page, 1);
				}
			} else if (this.current == 1) {
				if (this.dataList2.length < this.pages2.count) {
					this.pages2.page++;
					this.getData(this.pages2.page, 2);
				}
			}
		},
	}
</script>

<style lang="scss">
	.tabs_box {
		padding: 38rpx;
		background: #F6F6F7;
		z-index: 999;
		position: fixed;
		top: 0;
		// #ifndef MP-WEIXIN
		top: calc(80rpx + var(--status-bar-height));
		// #endif
		left: 0;
		right: 0;
	}

	.content {
		padding: 0 56rpx 20rpx;
		margin-top: 150rpx;
	}

	.copon_box {
		width: 638rpx;
		height: 164rpx;
		background: url(../../../static/image/coupon.png) no-repeat;
		background-size: 100% 100%;
		padding: 0 30rpx;
		margin-bottom: 20rpx;

		.left {
			min-height: 150rpx;
			width: 40rpx;
			word-wrap: wrap;
			font-size: 28rpx;
			line-height: 35rpx;
			border-radius: 4rpx;
			text-align: center;
			padding: 10rpx 0;
			transform: scale(0.8);
		}

		.right {
			width: 40rpx;
			word-wrap: wrap;
			font-size: 22rpx;
			line-height: 26rpx;
			border: 1px solid #fff;
			border-radius: 6rpx;
			text-align: center;
			padding: 10rpx 0;
			margin-left: 40rpx;
		}

		.center {
			flex: 1;

			.center_left {
				text-align: center;
				width: 50%;

				.price {
					font-size: 40rpx;
					font-weight: bold;
				}

				.info {
					color: #A4A4A4;
					font-size: 16rpx;

					.info_text {
						text-decoration: underline;
						margin-left: 4rpx;
					}
				}
			}

			.center_right {
				text-align: center;
				width: 50%;

				.rule {
					font-size: 24rpx;
				}

				.limit {
					font-size: 20rpx;
					// #ifndef MP-WEIXIN
					transform: scale(.8);
					// #endif
				}

				.time {
					font-size: 20rpx;
					border-radius: 16rpx;
					padding: 4rpx;
					// #ifndef MP-WEIXIN
					transform: scale(.7);
					line-height: 22rpx;
					// #endif
					// #ifdef MP-WEIXIN
					transform: scale(0.9);
					// #endif
				}
			}
		}

		&.copon {
			.left {
				background: #F6D32D;
				color: #C6272A;
			}

			.right {
				color: #F6D32D;
				border-color: #F6D32D;
			}

			.center_left {
				.price {
					color: #c6272a;
				}
			}

			.center_right {
				color: #757575;

				.rule {
					color: #191919;
				}

				.time {
					background: #E9ADAE;
				}
			}
		}

		&.copon_used {
			background: url(../../../static/image/coupon_used.png) no-repeat;
			background-size: 100% 100%;

			.left,
			.right {
				background: #CCCCCC;
				color: #787878;
				border-color: #B3B3B3;
			}

			.center_left {
				.price {
					color: #CCCCCC;
				}
			}

			.center_right {
				color: #CCCCCC;

				.rule {
					color: #CCCCCC;
				}

				.time {
					background: #ECECEC;
				}
			}
		}
	}

	.nodata-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 40rpx;
	}

	.nodata-pic {
		width: 400rpx;
		height: 300rpx;
	}

	.nodata-txt {
		text-align: center;
		font-size: 32rpx;
		color: #666666;
		padding-top: 30rpx;
	}
</style>
